import React, {Component, createRef} from 'react';
import {ControlsBFC, ControlsContainer} from "../style/Controls.css";
import VoiceControl from "./VoiceControl";
const PLAY_MODE = [
    "顺序播放",
    "单曲循环",
    "随机播放"
]
const PLAY_MODE_CLASSNAME=[
    "nisky-liebiaoxunhuan",
    "nisky-danquxunhuan",
    "nisky-suijibofang",
]
class Controls extends Component {
    constructor(props) {
        super(props);
        this.state={
            showVoiceControl:false,
        }
        this.musicPlayer = this.props.musicPlayer;
        this.VoiceControlTimer = null;
        this.volumeControlRef = createRef();
        this.volumeIconRef = createRef();
    }

    render() {
        return (
            <ControlsBFC>
                <ControlsContainer>
                    <button className={`iconfont ${getModeClassName(this.musicPlayer.state.mode)} control`} onClick={()=>this.musicPlayer.nextMode()}/>
                    <button className={`iconfont nisky-shangyiqu control`} onClick={()=>this.musicPlayer.prev()} />
                    {
                        !this.musicPlayer.state.playing?
                            <button className={`iconfont nisky-bofang control`} onClick={()=>this.musicPlayer.play()}/>
                            :<button className={`iconfont nisky-zanting control`} onClick={()=>this.musicPlayer.pause()}/>
                    }
                    <button className={`iconfont nisky-xiayiqu control`} onClick={()=>this.musicPlayer.next()}/>
                    <div  className={"iconfont"}>
                        {
                            <VoiceControl
                                ref={this.volumeControlRef}
                                volume={()=>this.musicPlayer.getVolume()}
                                setVolume={(volume)=>this.musicPlayer.setVolume(volume)}
                                show={this.state.showVoiceControl}
                            />
                        }
                        <button ref={this.volumeIconRef} className={`iconfont nisky-yinliangjia control`} onMouseUp={
                            ()=>{
                                if(this.state.showVoiceControl) this.closeVoiceControl();
                                else this.showVoiceControl();
                            }
                        }>
                        </button>
                    </div>

                </ControlsContainer>
            </ControlsBFC>
        );
    }

    mouseInHandle(e){

    }
    mouseOutHandle(e){

    }
    showVoiceControl(){
        this.setState({showVoiceControl:true})
        document.addEventListener("mousedown",this.VoiceControlShowHandle)
    }
    VoiceControlShowHandle =(e)=>{
        let {clientX,clientY} = e;
        if(!this.isInDom(clientX,clientY,this.volumeControlRef.current) &&
            !this.isInDom(clientX,clientY,this.volumeIconRef.current))
            this.closeVoiceControl();
    }
    closeVoiceControl(){
        this.setState({showVoiceControl:false})
        document.removeEventListener("mousedown",this.VoiceControlShowHandle)
    }
    isInDom(x,y,dom){
        let domRect = dom.getBoundingClientRect();
        if( y<domRect.top || domRect.bottom<y || x<domRect.left || domRect.right<x){
            return false;
        }
        return true;
    }





}

function getModeClassName(mode){
    return  PLAY_MODE_CLASSNAME[PLAY_MODE.indexOf(mode)];
}

export default Controls;